<template>
  <el-card class="card-body">
    <SearchForm @getTableData="getTableData" />
    <el-divider style="margin: 0 0 22px 0" />
    <DataTables :tableData="tableData" :count="count" @getTableData="getTableData" />
  </el-card>
</template>

<script>
import SearchForm from './components/SearchForm';
import DataTables from './components/DataTables';
import { getUserListApi } from "@/api/modules/user.api";

export default {
  components: {
    SearchForm,
    DataTables
  },
  data() {
    return {
      tableData: [],
      count: 0,
      page: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  mounted() {
    this.getTableData(this.page)
  },
  methods: {
    async getTableData({ pageNum = 1, pageSize = 10, ...data }) {
      const res = await getUserListApi({ pageNum, pageSize, ...data })
      this.tableData = res.records
      this.count = res.total
    }
  },
}
</script>
<style>

</style>
